<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getArray(length) {
            return Array.from({
                length
            }, (k, index) => index)
        }
        /**
         * @param { number } level
         * @returns {  { xing:number[],yue:number[],tai:number[],huang:number[] } }
         */
        function getGradeTransform(level) {
            let xing = []
            let yue = []
            let tai = []
            let huang = []
            // 星星的数量，总数取余
            const xingNumber = level % 3
            //月亮的总数，总数除3向下取整
            const yueCountNumber = parseInt(level / 3)
            // 如果总数取余有余数，则余数是星星
            if (xingNumber) {
                xing = getArray(xingNumber)
            }
            // 处理月亮的数量
            // 如果月亮的总数大于0小于3则直接算出月亮的数量，结束运算
            if (yueCountNumber > 0 && yueCountNumber < 3) {
                yue = getArray(yueCountNumber)
            } else if (yueCountNumber >= 3) {
                // 如果是月亮的总数大于3，则继续运算月亮的数量以及太阳的总数
                // 月亮的数量，通过月亮总数取余的方式
                const yueNumber = yueCountNumber % 3
                //  太阳的总数量 ， 通过月亮总数除3向下取整
                const taiCountNumber = parseInt(yueCountNumber / 3)
                // 月亮的数量
                if (yueNumber) {
                    yue = getArray(yueNumber)
                }
                // 如果太阳的总数大于0小于3则直接算出太阳的数量，结束运算
                if (taiCountNumber > 0 && taiCountNumber < 3) {
                    tai = getArray(taiCountNumber)
                } else if (taiCountNumber >= 3) {
                    const taiNumber = taiCountNumber % 3
                    const huangCountNumber = parseInt(taiCountNumber / 3)
                    if (taiNumber) {
                        tai = getArray(taiNumber)
                    }
                    if (huangCountNumber > 0) {
                        huang = getArray(huangCountNumber)
                    }
                }
            }
            return {
                xing,
                yue,
                tai,
                huang
            }
        }
        console.log(getGradeTransform(27))
    </script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box {
            width: 40px;
            height: 40px;
            background-color: red;
            /* transform-origin: 0%    0%; */
            transform: rotate(30deg) translateY(40px) ;
        }
    </style>
</head>

<body>

    <div class="box"></div>
</body>

</html>